<template>
	<view class="container">
		<!-- 顶部信息区 -->
		<view class="header-section">
			<view class="header">
				<text class="title">中国邮政智慧无人驿站</text>
			</view>
			<view class="info-row">
				<view class="station-info">
					<text class="info-label">【驿站编号】</text>
					<text class="info-text">驿站名称</text>
				</view>
				<view class="phone-info">
					<text class="info-label">【手机号码】</text>
					<text class="info-text">138****8888</text>
				</view>
			</view>
		</view>
		<!-- 取件码输入区域 -->
		<view class="input-section">
			<view class="pickup-code-input">
				<input class="code-input" placeholder="输入六位取件码" placeholder-class="placeholder-style" maxlength="6" />
				<button class="apply-button">申请进入驿站权限</button>
			</view>
			<view class="stats-row">
				<view class="package-count-container">
					<text class="stats-label">全部包裹数量</text>
				</view>
				<view class="light-control-container">
					<text class="stats-label">全部灯带显示按钮</text>
				</view>
			</view>
		</view>
		<!-- A区和B区信息展示 -->
		<view class="area-section">
			<!-- A区 -->
			<view class="area-container">
				<view class="area-header-bg">
					<view class="area-header area-a">A区(100件)</view>
					<view class="area-a-but">本区域灯带显示按钮</view>
				</view>
				<view class="table-header">
					<text class="table-cell">序号</text>
					<text class="table-cell">包裹条码尾号</text>
					<text class="table-cell">姓</text>
					<text class="table-cell">货架位置</text>
				</view>
				<view class="table-row" v-for="(item, index) in areaAData" :key="index">
					<text class="table-cell">{{ item.id }}</text>
					<text class="table-cell">{{ item.barcode }}</text>
					<text class="table-cell">{{ item.lastName }}</text>
					<text class="table-cell">{{ item.position }}</text>
				</view>
			</view>
			<!-- B区 -->
			<view class="area-container">
				<view class="area-header-bg">
					<view class="area-header area-b">B区(10件)</view>
					<view class="area-a-but">本区域灯带显示按钮</view>
				</view>
				<view class="table-header">
					<text class="table-cell">序号</text>
					<text class="table-cell">包裹条码尾号</text>
					<text class="table-cell">姓</text>
					<text class="table-cell">货架位置</text>
				</view>
				<view class="table-row" v-for="(item, index) in areaBData" :key="index">
					<text class="table-cell">{{ item.id }}</text>
					<text class="table-cell">{{ item.barcode }}</text>
					<text class="table-cell">{{ item.lastName }}</text>
					<text class="table-cell">{{ item.position }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// A区数据
				areaAData: [{
						id: '1',
						barcode: '123456',
						lastName: '张',
						position: 'A01-2-3'
					},
					{
						id: '2',
						barcode: '234567',
						lastName: '李',
						position: 'A02-1-4'
					},
					{
						id: '3',
						barcode: '345678',
						lastName: '王',
						position: 'A03-3-2'
					},
				],
				// B区数据
				areaBData: [{
						id: '1',
						barcode: '456789',
						lastName: '赵',
						position: 'B01-1-5'
					},
					{
						id: '2',
						barcode: '567890',
						lastName: '陈',
						position: 'B02-2-1'
					},
					{
						id: '3',
						barcode: '678901',
						lastName: '刘',
						position: 'B03-4-3'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: auto;
		padding: 20rpx;
		background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	}

	.header-section {
		margin-bottom: 30rpx;
	}

	.header {
		text-align: center;
		margin-bottom: 40rpx;
		padding: 20rpx 0;
	}

	.title {
		font-size: 50rpx;
		font-weight: 700;
		color: #0d47a1;
		letter-spacing: 1px;
		text-shadow: 0 2px 4px rgba(13, 71, 161, 0.2);
	}

	.info-row {
		display: flex;
		justify-content: space-between;
	}

	.station-info,
	.phone-info {
		display: flex;
		align-items: center;
	}

	.info-label {
		font-size: 26rpx;
		color: #7f8c8d;
		margin-right: 10rpx;
	}

	.info-text {
		font-size: 26rpx;
		color: #34495e;
		font-weight: 500;
	}

	/* 取件码输入区域 */
	.input-section {
		margin-bottom: 30rpx;
	}

	.pickup-code-input {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border: 2px solid #1976d2;
		border-radius: 16rpx;
		padding: 10rpx 25rpx;
		margin-bottom: 25rpx;
		box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.2);
	}

	.code-input {
		flex: 1;
		background-color: transparent;
		color: #0d47a1;
		font-size: 26rpx;
		padding: 10rpx;
		border: none;
		outline: none;
	}

	.placeholder-style {
		color: #90caf9;
		font-size: 26rpx;
	}

	.apply-button {
		background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
		color: #fff;
		border: none;
		font-size: 26rpx;
		border-radius: 12rpx;
		white-space: nowrap;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
		transition: all 0.3s ease;
	}

	.apply-button:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8px rgba(33, 150, 243, 0.4);
	}

	.stats-row {
		display: flex;
		justify-content: space-between;
	}

	.package-count-container,
	.light-control-container {
		flex: 1;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		background-color: #3498db;
		margin: 0 10rpx;
	}

	.stats-label {
		color: #ffffff;
		font-size: 26rpx;
	}

	.area-section {
		/* margin-bottom: 40rpx; */
	}

	.area-container {
		margin-bottom: 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(13, 71, 161, 0.15);
		border: 1px solid #bbdefb;
	}

	.area-header-bg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
	}

	.area-header {
		font-size: 26rpx;
		font-weight: 600;
		padding: 20rpx 25rpx;
		border-radius: 12rpx;
		color: #fff;
		text-align: center;
	}

	.area-a {
		background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
		box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
	}

	.area-b {
		background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
		box-shadow: 0 4rpx 12rpx rgba(30, 136, 229, 0.3);
	}

	.area-a-but {
		font-size: 26rpx;
		font-weight: 600;
		padding: 20rpx 25rpx;
		border-radius: 12rpx;
		background-color: #f1c40f;
		color: #fff;
	}

	.table-header {
		display: flex;
		background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%);
		padding: 20rpx 15rpx;
		border-radius: 12rpx;
		margin-bottom: 15rpx;
		font-weight: 600;
		color: #0d47a1;
		border: 1px solid #90caf9;
	}

	.table-row {
		display: flex;
		padding: 20rpx 15rpx;
		border-bottom: 1px solid #e3f2fd;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-cell {
		flex: 1;
		font-size: 26rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #1976d2;
	}

	.table-header .table-cell {
		color: #0d47a1;
		font-weight: 600;
	}
</style>